<template>
	<view v-if="showList === true" class="coupon-container">
		<view @click="closeSelect()" class="back-box">
			<image src="https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/member/arrow-right.png"></image>
			<view>返回</view>
		</view>
		<view style="width: 750upx;height: 1upx;"></view>
		<view class="coupon-list-box" v-if="couponList.length>0">
			<view v-for="(item,index) in couponList">
				<!-- 可领取 - start -->
				<view @click="toSelect(item)" class="coupon-info">
					<view class="coupon-text-box">
						<view class="coupon-text-money coupon-color-on">
							<view class="coupon-text-money-top">
								<text class="coupon-text-money-top-icon">￥</text>
								<text v-if="item.couponAmount < 10" class="coupon-text-money-top-num">{{item.couponAmount}}</text>
								<text v-else-if="item.couponAmount >= 10 && item.couponAmount < 100" class="coupon-text-money-top-num-1">{{item.couponAmount}}</text>
								<text v-else-if="item.couponAmount >= 100" class="coupon-text-money-top-num-2">{{item.couponAmount}}</text>
							</view>
							<view v-if="item.useAmout > 0" class="coupon-text-money-buttom">满{{item.useAmout}}可用</view>
						</view>
						<!-- 中间 -->
						<view class="coupon-center-box">
							<view class="coupon-center-top coupon-name-color" >{{item.couponName}}</view>
							<view class="coupon-center-bottom">{{item.typeName}}</view>
							<view class="coupon-center-bottom">{{item.couponNo}}</view>
						</view>
					</view>
					<!-- 底部 -->
					<view class="coupon-bottom-box">
						<view class="coupon-bottom-text">有效期：<text v-if="item.startTime">{{item.startTime}} ~ </text>{{item.endTime}}</view>
						<view class="coupon-bottom-text">{{item.shopNames || ''}}</view>
					</view>
				</view>
			</view>
			<view style="width: 750rpx;height: 70rpx;"></view>
		</view>
		<view class="no-data-box" v-if="list.length==0">
			<no_order title="暂无优惠券"></no_order> 
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showList: {
				type: Boolean,
				default: false
			},
			couponList:{
				type: Array,
				default: function () {
					return [];
				},
			}
		},
		data() {
			return {
			}
		},
		onLoad(option) {
		},
		methods: {
			// 获取优惠券名称
			getCouponTypeName(type){
				switch(type){
					case 1:
					return '店铺代金券';
					break;
					case 2:
					return '店铺满减券';
					break;
					case 11:
					return '商品代金券';
					break;
					case 12:
					return '商品满减券';
					break;
				}
			},
			// 选择优惠券
			toSelect(row){
				this.$emit('selectCoupon', row)
			},
			// 关闭
			closeSelect(){
				this.$emit('closeSelect', row)
			}
		}
	}
</script>

<style scoped>
	.back-box{
		display: flex;
		align-items: center;
		width: 750upx;
		height: 100upx;
		line-height: 100upx;
		background-color: #ffffff;
		padding: 0 30upx;
		font-size: 36upx;
	}
	.back-box image{
		width: 45upx;
		height: 45upx;
	}
	.coupon-container {
		font-size: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
	/* 优惠券 - start */
	.coupon-info{
		position:relative;
		margin: 36rpx 36rpx 0 36rpx;
		width: 678rpx;
		height: 270rpx;
		background: url('https://tousubiaoyang-1301970825.file.myqcloud.com/tg1670570842942.png')  no-repeat;
		background-size:100% 100%;
		box-sizing: border-box;
	}
	.coupon-text-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.coupon-color-on{
		color: #FF6E19;
	}
	.coupon-color-off{
		color: #999999;
	}
	.coupon-text-money{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		width: 260rpx;
		height: 191rpx;
		text-align: center;
	}
	.coupon-text-money-top{
	}
	.coupon-text-money-top-icon{
		font-size: 32rpx;
	}
	.coupon-text-money-top-num{
		font-size: 70rpx;
	}
	.coupon-text-money-top-num-1{
		font-size: 60rpx;
	}
	.coupon-text-money-top-num-2{
		font-size: 34rpx;
	}
	.coupon-text-money-buttom{
		font-size: 26rpx;
		text-align: center;
	}
	.coupon-text-line{
		width: 1rpx;
		height: 110rpx;
		border-left: 1rpx dashed #FF6800;
	}
	.coupon-text-line-no{
		width: 1rpx;
		height: 110rpx;
		border-left: 1rpx dashed #999999;
	}
	.coupon-center-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		padding: 0 20rpx;
	}
	.coupon-center-top{
		width: 432rpx;
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示	
		display: -webkit-box;	
		-webkit-line-clamp: 1; // 超出多少行		
		-webkit-box-orient: vertical;
	}
	.coupon-name-color{
		color: #333333;
	},
	.coupon-center-bottom{
		font-size: 26rpx;
		color: #888888;
		line-height: 50rpx;
	}
	.coupon-bottom-box{
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #888888;
		line-height: 80rpx;
		padding: 0 20rpx;
	}
	.coupon-type-img{
		position: absolute;
		right: 21rpx;
		top:26rpx;
		width: 119rpx;
		height: 119rpx;
	}
	/* 优惠券 - end */
	.no-data-box{
		display: flex;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.choose{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
		background-color: #ffffff;
	}
	.coupon-list-box{
		height: 100vh;
		overflow-y: scroll;
	}
</style>
